<script setup lang="ts">
import * as THREE from 'three'
import {onMounted} from "vue";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import {Pot} from "../../utils/threejs/geometry.ts"
import {Sprite} from "../../utils/threejs/sprite.ts"
import { DragControls } from 'three/addons/controls/DragControls.js'
onMounted(()=>{

  const box = document.getElementById('box')

  // 创建场景
  const scene = new THREE.Scene()

  // 创建并设置摄像头
  const camera = new THREE.PerspectiveCamera(80, box.clientWidth / box.clientHeight, 0.1, 1000)
  let x = 2
  let y = 10
  let z = 11
  camera.position.set(x, y, z)

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
  renderer.setSize(box.clientWidth, box.clientHeight)

  // 渲染器载到此box元素上
  box.appendChild(renderer.domElement)

  // 创建镜头控制系统
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
  scene.add(new THREE.AxesHelper(100))

  // 创建精灵图片
  const img = new Image()
  img.src = '/baicai.png'
  const sprite = new Sprite()

  // 挂载精灵图片
  img.onload = () => {
    for (let i = 0; i < 10; i++) {
      const crop = sprite._getCrop({img,position:{x:0,y:2,z:i}})
      scene.add(crop)
    }
  }

  // 创建花盆
  const pot1 = new Pot({
    width: 1,
    height: 1,
    depth: 1,
    color: 0xffffff,
    position:{
      x: 1,
      y: 1,
      z: 1,
    },
  })

  // 场景添加一个花盆
  scene.add( pot1._cube )

  // 递归循环渲染函数
  function animate() {
    requestAnimationFrame( animate )
    controls.update()
    // 渲染场景和相机
    renderer.render( scene, camera )
  }

  //执行渲染
  animate()

  const cubeControl = new DragControls( pot1._cube, camera, renderer.domElement );


  cubeControl.addEventListener( 'dragstart', function ( event ) {
    console.log(event)
    event.object.material.emissive.set( 0xaaaaaa );

  } );

  cubeControl.addEventListener( 'dragend', function ( event ) {

    event.object.material.emissive.set( 0x000000 );

  } );
})



</script>

<template>
  <div id="box"></div>
  <button>y+</button>
  <button>y-</button>
</template>

<style scoped>
#box {
  height: 800px;
  width: 800px;
  background: #5b5b5b;
}
</style>